/*
 * @Description: 登录模块
 * @Author: Yong
 * @Date: 2021-10-04 19:28:49
 * @LastEditTime: 2021-10-06 15:50:25
 */
import React, { useState } from 'react';

import { Input, List, Button, } from 'antd-mobile'
import { UserService } from '@apis/User'

import { setToken } from '@utils/auth';

import styles from './index.module.scss'
const Login = (props: any) => {

    const [loginID, setLoginID] = useState('111111')
    const [password, setPwd] = useState('888888')

    const loginBtn = async () => {
        const { data: { data: userInfo } } = await UserService.login({ U_LoginID: loginID, U_Password: password })
        // 登录成功
        setToken(userInfo.token)
        window.localStorage.setItem('userInfo', JSON.stringify(userInfo))
        // 跳转至首页
        props.history.push('/home')
    }
    return (
        <div className={styles.login}>
            <div>登录</div>
            <div className={styles.form}>
                <List style={{ '--prefix-width': '6em' }} >
                    <List.Item prefix='用户名'>
                        <Input placeholder='请输入用户名' value={loginID} onChange={(e) => setLoginID(e) } />
                    </List.Item>
                    <List.Item prefix='密码'>
                        <Input placeholder='请输入密码' type='password' value={password} onChange={(e) => setPwd(e)} />
                    </List.Item>
                </List>
                <Button block color='primary' size='large' onClick={ loginBtn } >登录</Button>
            </div>
        </div>
    )
}
export default Login